Alinhando um elemento bloco dentro de outro elemento bloco

Como sabemos o estilo de exibição dos boxes dos elementos pelo browser é static e é como empilhar caixas de cima para baixo e da esquerda para a direita. Este é o default do browser (além de display:block, boxsizing:borderbox).

No exemplo 1 vamos colocar uma div dentro da outra fica assim:
        .classe1{
            height:200px;
            width:200px;
            background-color:lightgreen;
        }

        .classe2{
            height:100px;
            width:100px;
            background-color:lightblue;
        }

        <div class="classe1">
            DIV1
            <div class="classe2">Div2</div>
        </div>

Como o browser exibe:

Podemos ver que a DIV2 esta dentro do espaço da DIV1 e seu posicionamento foi à esquerda logo depois da mensagem DIV1. Se não houvesse a mensagem os cantos superiores esquerdo seriam no mesmo ponto.

---

Adicionando position:relative a primeira div não muda o position-static pois o position-relative apenas desloca do position-static de um valor mas como não definimos ainda ele é zero e a posição continua a mesma.
Podemos colocar position absolute no segundo div mais interno que nada ainda é modificado no posicionamento.
Contudo fixando a relação entre a div interna e a div externa temos o seguinte resultado:


Importante : Ao colocarmos na CSS o top de 50% não significa que nosso elemento vai ficar no centro mas sim que vai começar a ser renderizado a 50% do elemento pai. Isto não obrigatoriamente coloca nosso objeto interno no centro especialmente se ele for grande. E isso vale tanto para o top, bottom, left e right
Portanto, ainda não esta no centro.

Agora na div interna precisamos definir que ela vá 50% para cima e 50% para esquerda do tamanho da div interna e ai a div interna estará no centro. Isto é feito pelo estilo transform:translate(-50%,-50%).